<template>
    <div class="notice-list">
        <h2>公告资讯</h2>
        <div class="eng-cont">
            <i>Announcement</i>
            <i>information</i>
        </div>

        <div class="list-cont">
            <myNoticeList v-for="item in noticeArr" :info="item" />
        </div>
        <MyPaging :total="total" v-model="page" :pagesize="10" />
    </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import myNoticeList from './components/my-notice-list.vue';
import { NoticeList } from '../../api/notice'
const noticeArr = ref([])
const total = ref(0)
const page = ref(1)
NoticeList(page.value).then(res => {
    let { count, lists } = res.data.data
    total.value = count
    noticeArr.value = lists

})
watch(page, (n) => {
    NoticeList(n).then(res => {
        let { count, lists } = res.data.data
        total.value = count
        noticeArr.value = lists

    })
})
</script>

<style lang="scss" scoped>
.notice-list {
    padding-bottom: .2604rem;

    >h2 {
        font-size: .1667rem;
        font-weight: bold;
        color: #333333;
        line-height: .1823rem;
        text-align: center;
        margin: auto;
        padding-top: .2604rem;
        padding-bottom: .0781rem;
    }

    >.eng-cont {
        display: flex;
        justify-content: center;
        margin-bottom: .2917rem;

        >i {
            font-size: .125rem;
            font-weight: 300;
            color: #999999;
        }

        >i:nth-of-type(1) {
            margin-right: .0521rem;
        }
    }

    .list-cont {
        padding: 0 0 .1042rem .8906rem;
        display: flex;
        flex-wrap: wrap;
    }
}
</style>